<template>
  <div class="main_page">
    <header class="header">
      <section class="location ellipsis">
        <div class="location_container">
          <i class="iconfont icon-location"></i>
          <span class="gps_data ellipsis">{{gps_data}}</span>
        </div>
      </section>
      <section class="search_box">
        <div class="search_box_container">
          <el-input v-model="input" size="medium" placeholder="搜索商家或食物"/>
        </div>
      </section>
    </header>
    <section class="body">
      <section class="body_top hot_activity">
        <banner/>
      </section>
      <section class="categary">
        <categary/>
      </section>
      <section class="life">
        <div class="life_container">
          <div class="film_ticket life_item">
            <h1>电影</h1>
            <h2>抢10元</h2>
            <i class="iconfont icon-dianyingpiao"></i>
          </div>
          <div class="hotel life_item">
            <h1>酒店</h1>
            <h2>百元红包</h2>
            <i class="iconfont icon-feizhu"></i>
          </div>
          <div class="train_ticket life_item">
            <h1>火车票</h1>
            <h2>便捷出行</h2>
            <i class="iconfont icon-chuhang"></i>
          </div>
        </div>
      </section>
      <section class="promotion_area">
        <div class="title">优惠专区</div>
        <div class="hot">
          <div class="promotion">
            <div class="top red_bgc">限量抢购</div>
            <div class="info">
              <p class="info_1">午餐9.9元起</p>
              <p class="info_2 hot_info">243正在抢</p>
            </div>
          </div>
          <div class="promotion">
            <div class="top blue_bgc">会员专享</div>
            <div class="info">
              <p class="info_1">超级会员趴</p>
              <p class="info_2">限时狂欢</p>
            </div>
          </div>
        </div>
      </section>
      <section class="recommend_stores">
        <div class="title">推荐商家</div>
        <div class="stores_filter">
          <div class="comprehensive">综合排序 <i class="iconfont icon-xiala"></i></div>
          <div class="distance">距离</div>
          <div class="sales_volume">销量</div>
          <div class="filter r">筛选 <i class="iconfont icon-shaixuan"></i></div>
        </div>
        <div class="promotion_tags">
          <div class="tag">首单立减</div>
          <div class="tag">品质联盟</div>
          <div class="tag">满减优惠</div>
          <div class="tag">新店</div>
        </div>

        <storeItem v-for="n in storeItem" :storeItem="n" :key="n.id"/>

      </section>
    </section>
    <gps @addr_callback="addr_callback"/>
  </div>

</template>

<script>
  import banner from '../../components/carousel/banner'
  import categary from '../../components/carousel/category'
  import storeItem from '../../components/store_item/store_item'
  import gps from '../../components/geolocation/geolocation'

  import 'swiper/dist/css/swiper.min.css'

  export default {
    data() {
      return {
        input: '',
        gps_data: '定位中...',
        storeItem: [
          {
            id: 's001',
            store_img: '我是头像',
            store_title: '宅急送',
            points: '5.0',
            sales_counts: '999+',
            min_price_1: '15',
            min_price_2: '2',
            origin_price: '99',
            time_number: '40',
            distance_number: 10,
            tags: [
              '首单减15',
              '60减26',
              '120减36',
              '支持自取'
            ]
          },
          {
            id: 's002',
            store_img: '我是头像',
            store_title: '必胜客',
            points: '4.0',
            sales_counts: '99',
            min_price_1: '15',
            min_price_2: '2',
            origin_price: '99',
            time_number: '40',
            distance_number: 10,
            tags: [
              '首单减15',
              '60减26',
              '120减36',
              '支持自取'
            ]
          },
          {
            id: 's003',
            store_img: '我是头像',
            store_title: '清真',
            points: '3.0',
            sales_counts: '9',
            min_price_1: '15',
            min_price_2: '2',
            origin_price: '99',
            time_number: '40',
            distance_number: 10,
            tags: [
              '首单减15',
              '60减26',
              '120减36',
              '支持自取'
            ]
          }
        ]
      }
    },
    components: {
      banner,
      categary,
      storeItem,
      gps
    },
    methods: {
      addr_callback: function (callback_data) {
        this.gps_data = callback_data;
        console.log(callback_data);
      }
    }
  }
</script>

<style scoped lang="scss">
  .main_page {

    .header {
      padding-bottom: 10px;
      border-bottom: 1px #eee solid;

      .location_container {
        margin: 10px;

        .gps_data {
          font-size: 1.6rem;
        }
      }

      .search_box_container {
        width: 80%;
        margin: 0 auto;
      }
    }

    .iconfont {
      padding: 5px 5px;
      font-weight: bold;
      display: inline-block;
      font-size: 2rem;
    }

    .body {
      & > section {
        padding: 0 15px;
      }

      & > section > .title {
        margin: 10px 0;
        font-weight: bolder;
      }

      .body_top {
        padding: 20px 0 150px 0;
        position: relative;
        background-color: #eee;
      }

      .life {
        margin: 20px 0;

        .life_container {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;

          .life_item {
            position: relative;
            font-weight: bolder;
            padding: 10px;
            border-radius: 5px;
            background-color: #eee;
            width: 30%;

            h1 {
              color: #000;
              font-family: "黑体";
              font-size: 1.4rem;
            }

            h2 {
              color: #999;
              font-family: "黑体";
              font-size: 1.0rem;
            }

            i {
              position: absolute;
              right: 5px;
              bottom: 1px;
              font-size: 2rem;
            }
          }
        }
      }

      .promotion_area {
        .hot {
          font-size: 1.4rem;
          font-weight: bolder;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;

          .promotion_area {
            margin: 20px 0;
          }

          .promotion {
            width: 49%;
            border-radius: 5px;
            text-align: center;
            background-color: #eee;

            .top {
              width: 50%;
              padding: 5px 15px;
              margin: 0 auto;
              color: #fff;
              border-radius: 0 0 5px 5px;
            }

            .info {
              margin: 80px auto 20px;
              text-align: center;
              width: 80%;

              .info_1 {
                font-size: 1.8rem;
              }

              .info_2 {
                font-weight: initial;
                color: #666;
              }
            }

            .hot_info {
              color: red !important;
            }

            .hot_info:after {
              content: "GO﹥";
              color: #fff;
              margin-left: 5px;
              padding: 1px 5px;
              font-weight: bolder;
              border-radius: 10px;
              background-color: red;
            }

            .red_bgc {
              background-color: red;
            }

            .blue_bgc {
              background-color: aqua;
            }
          }
        }
      }

      .recommend_stores {

        .stores_filter {
          font-size: 1.4rem;
          position: relative;

          & > div {
            display: inline-block;
          }

          & > .distance {
            padding: 0 30px;
          }

          & > .r {
            position: absolute;
            right: 0;
          }

          i {
            font-size: 1rem;
          }
        }

        .promotion_tags {
          margin: 10px 0;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;

          .tag {
            border-radius: 5px;
            background-color: #eee;
            font-size: 1.4rem;
            width: 23%;
            text-align: center;
            padding: 5px 0;
          }
        }
      }
    }
  }
</style>
